<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/8/11
  Time: 15:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<html>
<head>
    <title>登录首页</title>
    <link rel="stylesheet" href="/user/Login.css">
    <link rel="stylesheet" href="/static/icon/icon.css">
    <link rel="stylesheet" href="/static/css/reset.css">
    <%--layui css--%>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        #xc-user-body .xc-body-wrapper .xc-login .xc-login-wrapper .xc-login-box{
            top: 10px;
            margin-top: 9px;
            min-height: 250px;
            max-height: 320px;
            padding: 30px 30px 30px;
            box-shadow: 0 1px 6px rgba(0,0,0,0.1);
            border-radius: 4px 4px 4px 4px;
            position: absolute;
            left: 0;
            right: 0;
            background-color: #FFF;
        }
        #xc-user-body .xc-body-wrapper .xc-login .xc-login-wrapper .xc-login-box .xc-part-inputLogin .xc-submit-login {
            background-color: #FF9A14;
            width: 100%;
            height: 42px;
            line-height: 42px;
            margin: 40px 0 10px 0;
            border: none;
            color: #FFFFFF;
            font-size: 16px;
            border-radius: 4px;
            clear: both;
            cursor: pointer; /*光标*/
        }
        #xc-user-body .xc-body-wrapper .xc-login .xc-login-wrapper .xc-login-box .xc-login-selection .xc-login-about .free-register{
            float: left;
            color: #3882E5;
        }
        #xc-user-body .xc-body-wrapper .xc-login .xc-login-wrapper .xc-login-box .xc-part-inputLogin .xc-password  .getCode{
            color: #3882E5;
            background-color: white;
            border: none;
            font-size: 13px;
            cursor: pointer; /*光标*/
        }
        #xc-user-body .xc-body-wrapper .xc-login .xc-login-wrapper .xc-login-box .xc-part-inputLogin .xc-password  .getCode:hover{
            text-decoration: underline;
        }
    </style>
</head>
<body>
<!--头部-->
<header id="xc-user-header">
    <!--头部包装器-->
    <div class="xc-header-wrapper">
        <div class="xc-lg-head">
            <h1 class="xc-jumpHome">
                <a href="http://localhost:8090/index/Index.jsp" type="hidden" title="携程旅行网"></a>
                <!--            <img class="xc-header-img" src="../static/imgs/1.png">-->
            </h1>
        </div>
        <div class="xc-tips">
            <img class="xc-tips-img" src="/static/imgs/user-caveat.png">
            依据《网络安全法》，为保障您相关功能的正常使用，账号需绑定手机，如您未绑定则登录后会引导您操作绑定。 新版
            <a href="http://pages.ctrip.com/public/serve%20guideline.htm?2">《隐私政策》</a>
            已上线，感谢您的支持。
        </div>
    </div>
</header>
<!--主体部分-->
<mianBody id="xc-user-body">
    <div class="xc-body-wrapper">
        <!--广告背景图-->
        <div class="xc-background-wrapper">
            <div class="xc-part-img">
                <div class="xc-part-ads">
                    <span class="xc-ads">广告</span>
                </div>
            </div>
        </div>
        <!--个性登录-->
        <div class="xc-login">
            <div class="xc-login-wrapper">
                <!--个性化登录-->
                <div class="xc-login-box">
                    <!--标题部分-->
                    <h1 class="xc-box-title">
                        手机动态码登录
                    </h1>
                    <!--输入账号密码及登录部分-->
                    <div class="xc-part-inputLogin">
                        <form action="/api/user/loginUserByCode"  method="post">
                            <!--账号输入-->
                            <dl class="xc-username">
                                <dd>
                                    <input class="xc-inputAccount" type="text" value="${phone}" name="user_phone" placeholder="请输入手机号" autocomplete="off">
                                </dd>
                            </dl>
                            <!--密码输入-->
                            <dl class="xc-password">
                                <dd>
                                    <input class="xc-inputPassword" type="text" name="user_password" placeholder="动态码" autocomplete="off" id="inputCode">
                                    <button id="getCode" class="getCode">发送动态码</button>
                                </dd>
                            </dl>
                            <div class="mm-login-error" style="font-size: 12px;color: red">${message}</div>
                            <input id="code" type="text" value="${message}" style="display: none">
                            <!--登录-->
                            <dl>
                                <!--登录选项部分-->
                                <div class="xc-login-set">
                                    <div class="xc-check">
                                        <input type="checkbox" checked="checked">
                                        30天内自动登录
                                    </div>
                                </div>
                                <dd>
                                    <!--点击登录部分-->
                                    <button class="xc-submit-login" onclick="checkCode()">登&nbsp;录</button>
                                </dd>
                            </dl>
                            <!--提示-->
                            <p class="xc-agreement">
                                登录即代表您同意我们的
                                <a href="">服务协议</a>
                                和
                                <a href="">隐私政策</a>
                            </p>
                        </form>
                    </div>
                    <!--选择登录方式-->
                    <div class="xc-login-selection">
                        <!--关于登录-->
                        <div class="xc-login-about">
                            <a href="http://localhost:8090/user/userLogin.jsp" class="free-register">携程账号登录</a>
                        </div>
                        <!--选则其他登录方式-->
                    </div>
                    <!--扫码登录-->
                    <div class="xc-login-scanCode">
                        <a href="http://localhost:8090/user/userLoginCode.jsp">
                            扫<br />
                            码<br />
                            登<br />
                            录<br />
                            <img src="/static/imgs/user-code.png">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</mianBody>
<!--底部-->
<footer id="xc-user-foot">
    <div class="xc-foot-wrapper">
        <p>
            <a href="http://pages.ctrip.com/public/sitemap/sitemap.htm">网站导航</a>
            |
            <a href="">宾馆索引</a>
            |
            <a href="">用户协议</a>
            |
            <a href="">关于携程</a>
            |
            <a href="">企业公民</a>
            |
            <a href="">诚聘英才</a>
            |
            <a href="">分销联盟</a>
            |
            <a href="">企业礼品卡采购</a>
            |
            <a href="">代理合作</a>
            |
            <a href="">广告业务</a>
            |
            <a href="">联系我们</a>
            |
            <a href="">返回旧版</a>
        </p>
        <p>
            <a href="">Copyright ©</a>
            1999-2020,
            <a href="">ctrip.com</a>
            . All rights reserved.
        </p>
    </div>
</footer>
<script>
    function checkCode() {
        let code = document.getElementById("inputCode").value;
        let trueCode = document.getElementById("code").value;
        console.log(trueCode);
        if(code === trueCode){
            alert('登录成功！');
            window.location.href="http://localhost:8090/index/Index.jsp";
            window.event.returnValue=false;
        }else {
            alert('输入的动态码有误!');
            window.location.href="http://localhost:8090/user/userLoginPhone.jsp";
        }
    }
</script>
<%--jquery--%>
<script src="/static/js/jquery.min.js"></script>
<%--layui js--%>
<script src="/static/layui/layui.all.js"></script>
</body>
</html>